<template>
  <div class='container'>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">【题型】：{{questionTypeFn(answer.questionType)}}题</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【编号】：{{answer.id}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【难度】：{{difficultyFn(answer.difficulty)}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【标签】：{{answer.tags}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【学科】：{{answer.subjectName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【目录】：{{answer.directoryName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【方向】：{{answer.direction}}</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>【题干】：</el-row>
    <!-- 用v-html来解析标签 -->
    <el-row>
      <div v-html="answer.question"></div>
    </el-row>
    <el-row>{{questionTypeFn(answer.questionType)}}题选项：(以下选中的选项为正确答案)</el-row>
    <div class="radio">
      <!-- 如果是单选，才显示 -->
      <template v-if="answer.questionType === '1'">
        <el-radio-group v-model="radio">
          <!-- 绑定的是radio值,他与label值相同就会被选中,如果想回填,后台返回的是1是选中状态,可以将radio在data中写死为1,这样就会被选中了 -->
          <!-- 遍历数组中每一项数据 -->
          <el-row v-for="item in answer.options" :key="item.id">
            <!-- 不能选的组 -->
            <el-radio-group>
              <el-radio v-if="item.isRight === 0" :label="item.isRight">{{item.code}}：{{ item.title }} <img style="width:100px" :src="item.img"></el-radio>
            </el-radio-group>
            <!-- 默认选中的组 -->
            <el-radio v-if="item.isRight === 1" :label="item.isRight">{{item.code}}：{{ item.title }} <img style="width:100px" :src="item.img"></el-radio>
          </el-row>
        </el-radio-group>
      </template>
      <!-- 如果是多选才显示 -->
      <template v-if="answer.questionType === '2'">
        <el-row v-for="item in answer.options" :key="item.id">
          <el-checkbox-group v-model="checkeList">
            <!-- checkeList是选中的数组，最外层的是判断哪些是选中 -->
            <!-- 不能选的组 -->
            <el-checkbox-group v-model="checkeList1">
              <el-checkbox v-if="item.isRight === 0" :label="item.isRight" @click.native.prevent="">{{item.code}}：{{item.title}} <img style="width:100px" :src="item.img"></el-checkbox>
            </el-checkbox-group>
            <!-- 默认选中的组 -->
            <el-checkbox v-if="item.isRight === 1" :label="item.isRight" @click.native.prevent="">{{item.code}}：{{item.title}} <img style="width:100px" :src="item.img"></el-checkbox>
          </el-checkbox-group>
        </el-row>
      </template>
    </div>
    <el-divider></el-divider>
    <span>
      【参考答案】：
      <el-button type="danger" @click="checkVideoFn()">视频答案预览</el-button>
      <div v-if="videoState">
        <video :src="answer.videoURL" controls="controls" autoplay width="80%"></video>
      </div>
    </span>
    <el-divider></el-divider>
    <span>
      【答案解析】:无
    </span>
    <el-divider></el-divider>
    <span>
      【题目备注】：{{ answer.remarks}}
    </span>
    <span class="dialog-footer">
      <el-button type="primary" @click="$emit('close')">关闭</el-button>
    </span>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
const questionTypeObj = {}
const difficultyObj = {}
questionType.forEach(item => {
  questionTypeObj[item.value] = item.label
})
difficulty.forEach(item => {
  difficultyObj[item.value] = item.label
})
export default {
  name: 'QuestionsPreview',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      radio: 1,
      answer: [],
      checkeList: [1], // 默认为1的值是选中的状态
      checkeList1: false,
      videoState: false
    }
  },
  created () {
    this.loaddetail()
  },
  methods: {
    async loaddetail () {
      try {
        const res = await detail({ id: this.id })
        // console.log(res)
        this.answer = res.data
        // console.log(this.answer.answerID)
      } catch (e) {
        console.log(e)
      }
    },
    questionTypeFn (code) {
      return questionTypeObj[code]
    },
    difficultyFn (code) {
      return difficultyObj[code]
    },
    checkVideoFn () {
      // 点击按钮出现弹窗播放视频
      this.videoState = true
    }
  }
}
</script>

<style scoped lang='scss'>
.bg-purple {
  font-size: 16px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.radio {
  margin-top: 10px;
  justify-content: flex-end;
}
</style>
